<script setup lang="ts">
import { ref } from "vue";
import { useColumns } from "./withdraw_columns";
import "plus-pro-components/es/components/search/style/css";
import { PlusSearch, type PlusColumn } from "plus-pro-components";
import { ElMessage } from "element-plus";
import { addDialog } from "@/components/ReDialog";
import { handleWithdraw } from "@/api/user";
const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
});

const searchColumns: PlusColumn[] = [
  {
    label: "搜索",
    width: 200,
    prop: "keyWord",
    valueType: "copy",
    tooltip: "请输入搜索关键词"
  },
  {
    label: "选择时间范围",
    labelWidth: 120,
    width: 600,
    prop: "dateRange",
    valueType: "date-picker",
    tooltip: "请选择时间段",
    fieldProps: {
      type: "daterange",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    }
  },
  {
    label: "处理时间",
    labelWidth: 120,
    width: 600,
    prop: "handleTime",
    valueType: "date-picker",
    tooltip: "请选择时间",
    fieldProps: {
      type: "date",
      placeholder: "处理时间",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    }
  },
  {
    label: "状态",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "待审核",
        value: "0",
        color: "red"
      },
      {
        label: "已通过",
        value: "1",
        color: "blue"
      },
      {
        label: "驳回",
        value: "2",
        color: "green"
      }
    ]
  }
];

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  loadData,
  onSizeChange,
  onKeywordChange,
  onCurrentChange
} = useColumns(props.userId);

const handleSearch = (value: any) => {
  console.log(value, "search");
  onKeywordChange(value);
};
const handleReset = value => {
  console.log("reset", value);
  onKeywordChange(value);
};
const handleChange = (value: any, target: any) => {
  console.log("change", value);
  if (target.prop == "keyWord") {
    return;
  }
  onKeywordChange(value);
};
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>提现列表</h3>
        </template>
        <PlusSearch
          class="mt-5"
          :columns="searchColumns"
          :hasUnfold="false"
          @reset="handleReset"
          @change="handleChange"
          @search="handleSearch"
        />
      </ElPageHeader>
    </template>
    <pure-table
      border
      :fit="true"
      :adaptiveConfig="adaptiveConfig"
      row-key="id"
      alignWhole="center"
       
      :loading="loading"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
    >
      <template #fund="{ row }">
        <el-descriptions :column="1">
          <el-descriptions-item label="实际到账">{{
            row.real_num
          }}</el-descriptions-item>
          <el-descriptions-item label="提现金额">{{
            row.total_num
          }}</el-descriptions-item>
          <el-descriptions-item label="优惠点">{{
            row.coupon_num
          }}</el-descriptions-item>
          <el-descriptions-item label="提现费用">{{
            row.total_fee
          }}</el-descriptions-item>
        </el-descriptions>
      </template>
      <template #bank="{ row }">
        <div class="flex flex-col wrap-text">
          <span>开户行： {{ row.khh }}</span>
          <span>银行详情： {{ row.yhmc }}</span>
          <span>卡号： {{ row.yhkh }}</span>
          <span>身份证： {{ row.sfz }}</span>
        </div>
      </template>
      <template #status="{ row }">
        <el-tag v-if="row.status == '1'" type="success">已通过</el-tag>
        <el-tag v-else-if="row.status == '2'" type="danger">驳回</el-tag>
        <el-tag v-else type="primary">待审核</el-tag>
      </template>
    </pure-table>
  </ElCard>
</template>

<style scoped>
:deep(.el-descriptions),
:deep(.el-descriptions__table tr) {
  --el-card-bg-color: transparent !important;
  --el-fill-color-blank: transparent !important;
  background: transparent !important;
}
.wrap-text {
  white-space: normal !important; /* 允许自动换行 */
  word-break: break-all; /* 强制换行 */
}
</style>
